<template>
	<div class="row">
		<div class="col-sm-12 col-md-8">
			<new-pizza></new-pizza>
		</div>
		<div class="col-sm-12 col-md-4">
			<h3 class="text-muted my-5">菜单</h3>
			<table class="table">
				<thead class="table table-default">
					<tr>
						<th>品种</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item,index in getMenuItem"  @click="remove(index)" v-if="changeShow(index)">
						<td>{{item.name}}</td>
						<td><button class="btn btn-outline-success btn-sm">X</button></td>
					</tr>
				</tbody>
				
				
			</table>
		</div>
		
	</div>
</template>

<script>
	import NewPizza from './NewPizza.vue'
	export default{
		components:{
			NewPizza
		},
		data(){
			return{
				// getMenuItem:[],
				currentIndex:[]
			}
		},
	created() {
		fetch('/mock/admain/admain.json').then(res=>{
			return res.json()
		}).then(data=>{
			// this.getMenuItem=data.data
			//数据同步
			this.$store.commit('setMenuItems',data.data)
		})
	},
	methods:{
		remove(index){
			// this.$store.commit('removeMenuItems',)
			this.currentIndex.push(index)
		}
	},
	computed:{
		changeShow(index){
			return function(index){
				return !this.currentIndex.includes(index)
			}
		},
     getMenuItem:{
			 get(){
				 return this.$store.state.menu.menuItems
			 },
			 set(){
				 
			 }
		 }		
	}

	}
</script>

<style>
</style>
